<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>作文品读</title>
	<link rel="stylesheet" type="text/css" href="../plug/swiper/css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="../plug/layui/css/layui.css">
	<link rel="stylesheet" type="text/css" href="../css/style.css">
	<link rel="stylesheet" type="text/css" href="../font/iconfont.css">
</head>
<!-- 注意body的class -->
<body class="bg_gray">
	<!-- 加载层 -->
	<div class="load_contain m_flex_box flex_vc flex_hc">
		<svg width="58" height="58" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg">
   		 	<g fill="none" fill-rule="evenodd">
        		<g transform="translate(2 1)" stroke="#FFF" stroke-width="1.5">
		            <circle cx="42.601" cy="11.462" r="5" fill-opacity="1" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="1;0;0;0;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="49.063" cy="27.063" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;1;0;0;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="42.601" cy="42.663" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;1;0;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="27" cy="49.125" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;1;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="11.399" cy="42.663" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;1;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="4.938" cy="27.063" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;0;1;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="11.399" cy="11.462" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;0;0;1;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="27" cy="5" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;0;0;0;1" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		        </g>
		    </g>
		</svg>
	</div>
	<nav class="top_nav pos_f white bor_b">
		<a href="javascript:history.go(-1)" class="top_a nav_left">
			<i class="iconfont icon-left"></i>
		</a>
		<p class="nav_top_center">文章详情</p>
		<!-- 收藏 -->
		<div class="top_a nav_right">
			<img src="../img/sc.png" class="nva_favourite">
		</div>
	</nav>
	<div class="padd_top"></div>
	<div class="article_detail_contain">
		<!-- 文章标题 -->
		<p class="article_detail_tit">四季如春</p>
		<div class="article_detail_intro m_flex_box flex_hc">
			<span>一年级</span>
			<span>初中</span>
			<span>712字</span>
		</div>
		<!-- 文章内容 -->
		<div class="article_detail_art">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo dolore veritatis animi nisi in magnam aut fugit, dolores odio molestiae adipisci cum soluta ducimus obcaecati vel temporibus reprehenderit, quos corporis.
		</div>
		<!-- 赞或踩 -->
		<div class="pl_contain m_flex_box flex_vc flex_hc">
			<div class="pl_contain_inner zan m_flex_box flex_vc flex_hc">
				<i class="iconfont icon-zan"></i>
				<span>442000</span>
			</div>
			<div class="pl_contain_inner buzan m_flex_box flex_vc flex_hc">
				<i class="iconfont icon-iconfontzan"></i>
				<span>442000</span>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="../js/public.js"></script>
	<script type="text/javascript" src="../plug/UI/js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="../plug/layui/layui.all.js"></script>
	<script type="text/javascript" src="../plug/lazy/jquery.lazyload.min.js"></script>
	<script type="text/javascript" src="../js/clamp.min.js"></script>
	<script type="text/javascript" src="../plug/swiper/js/swiper.jquery.min.js"></script>
	<script type="text/javascript" src="../js/reset_font.js"></script>
	<script type="text/javascript">
		/*收藏*/
		$(".top_nav").on("click",".nva_favourite",function(){
			if($(this).hasClass("active")){
				layer.msg('<img src="../img/star.png" class="star_"><p>取消收藏成功</p>');
				$(this).attr("src","../img/sc.png");
				$(this).removeClass("active");
			}else{
				layer.msg('<img src="../img/star.png" class="star_"><p>收藏成功</p>');
				$(this).attr("src","../img/sc_.png");
				$(this).addClass("active");
			}
		});
		/*点赞   需要判断是否已经点过赞或踩，有过赞或踩的需要给.pl_contain_inner添加active类*/
		$(".pl_contain").on("click",".pl_contain_inner",function(){
			var that = $(this);
			if($(".pl_contain_inner").eq(0).hasClass("active") || $(".pl_contain_inner").eq(1).hasClass("active")){
			}else{
				that.addClass("active");
				var num = parseInt(that.find("span").text())+1;
				that.find("span").html(num);
			}
		});
	</script>
</body>
</html>